<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #toolbar>
<!--        <a-button type="primary" @click="handleOrderDetail(selectedRow)" :disabled="!hasSelectedRows" v-auth="'ACTION_orderDetail'"> 查看详情 </a-button>-->
<!--        <a-button type="primary" @click="handleRefund(selectedRow)" :disabled="!hasSelectedRows" v-auth="'ACTION_orderApplyrefund'"> 申请退款 </a-button>-->
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>
    </BasicTable>
    <OrderDrawer @register="registerDrawer" @success="handleSuccess" />
    <UploadFileDrawer @register="registerUploadDrawer" @success="handleSuccess" />
    <PayInfoModal @register="registerPayInfoModal"></PayInfoModal>
    <OrderOptLogModal @register="registerOrderOptLogModal"></OrderOptLogModal>
    <OrderDetailModal @register="registerOrderDetailModal"></OrderDetailModal>
  </div>
</template>
<script lang="ts" setup name="order">
import {reactive, watch} from 'vue'
import {BasicTable, TableAction} from '@apps/antd-admin/src/components/Table';
import { useBaseTable } from '@apps/antd-admin/src/hooks';
import { Api, orderRefund } from './api';
import { useDrawer } from '@apps/antd-admin/src/components/drawer';
import OrderDrawer from './OrderDrawer.vue';
import UploadFileDrawer from './UploadFileDrawer.vue';
import { useModal } from '@apps/antd-admin/src/components/modal';
import PayInfoModal from './PayInfoModal.vue';
import OrderOptLogModal from '../orderoptlog/OrderOptLogModal.vue';
import OrderDetailModal from './OrderDetailModal.vue';
import { columns, searchFormSchema } from './data';
import { useMessage } from '@apps/antd-admin/src/hooks/web/useMessage';
import { useRoute } from 'vue-router';
const { createMessage, createConfirm } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer();
const route = useRoute();
const [registerUploadDrawer, { openDrawer:openUploadDrewer }] = useDrawer();
const { prefixCls, tableContext,handlePost } = useBaseTable({
  tableProps: {
    title: '订单列表',
    listUrl: Api.page,
    //列表查询handler
    handlerName: 'adminBusOrderListHandler',
    delUrl: Api.remove,
    columns,
    formConfig: {
      labelWidth: 140,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: true,
    rowKey: 'orderInfoId',
    showActionColumn: true,
    actionColumn: {
      width: 180,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  },
});

//注册table数据
const [registerTable, { reload, setProps }, { rowSelection, selectedRow, hasSelectedRows }] = tableContext;
const [registerPayInfoModal, { openModal: openPayInfoModal }] = useModal();
const [registerOrderOptLogModal, { openModal: openOrderOptLogModal }] = useModal();
const [registerOrderDetailModal, { openModal: openOrderDetailModal }] = useModal();
const router = useRoute();
const searchInfo = reactive<Recordable>({
});
watch(() => router.name, (newParams, oldParams) => {
  let state =localStorage.getItem('orderState')
  // 当路由参数发生变化时，这个函数会被调用
  console.info("state参数",state)
  console.info("route参数",newParams)
  console.info("route参数",router.params)
  // 你可以在这里根据新的参数执行一些逻辑
});


/**
 * 行内操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '详情',
      icon: 'clarity:note-edit-line',
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '报价',
      icon: 'clarity:note-edit-line',
      ifShow: record.state == 0,
      onClick: handleBj.bind(null, record),
    },
    {
      label: '确认编译',
      icon: 'clarity:note-edit-line',
      ifShow: record.state == 2 && record.hasFile1==1,
      popConfirm: {
        title: '是否确认编译该订单?',
        confirm: handleConfirmOrder.bind(null, record),
      },
    },
    {
      label: '上传编译稿',
      icon: 'clarity:note-edit-line',
      ifShow: record.state == 3,
      onClick: handleUpload.bind(null, record),
    },
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: '上传编译稿',
      ifShow:  record.state == 4,
      onClick: handleUpload.bind(null, record),
    },
    {
      label: '完成订单',
      ifShow:  record.state == 4,
      popConfirm: {
        title: '是否确认完成该订单?',
        confirm: handleFinishOrder.bind(null, record),
      },
    },
  ];
}

function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
  });
}

function payInfoHandler(record) {
  openPayInfoModal(true, {
    record,
    isUpdate: false,
  });
}

function orderSubmitHandler() {
  openDrawer(true, {
    isUpdate: false,
  });
}

function optLogHandler(record) {
  let data = { orderId: record.orderId };
  openOrderOptLogModal(true, {
    data,
    isUpdate: false,
  });
}

function handleOrderDetail(record) {
  openOrderDetailModal(true, {
    record,
    isUpdate: false,
  });
}

function handleRefund(record) {
  createConfirm({
    iconType: 'info',
    title: '申请退款',
    content: '此订单是否申请退款？',
    onOk: async () => {
      await orderRefund({ orderId: record.orderId });
      await reload();
    },
    onCancel: async () => {},
  });
}

function handleConfirmOrder(record: Recordable) {
  handlePost(Api.receivingOrder,{
    orderInfoId:record.orderInfoId,
  })
}

function handleFinishOrder(record: Recordable) {
  handlePost(Api.finishOrder,{
    orderInfoId:record.orderInfoId,
  })
}


function handleEdit(record: Recordable) {
  record.isBj=false;
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

function handleBj(record: Recordable) {
  record.isBj=true;
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

function handleUpload(record: Recordable) {
  openUploadDrewer(true, {
    record,
    isUpdate: true,
  });
}

function handleSuccess() {
  reload();
}

function setSearchInfoProps(userId) {
  console.info('userId', userId);
  setProps({ searchInfo: { userId: userId } });
}

defineExpose({
  setSearchInfoProps,
});
</script>
